<template>
  <div class="professor-detailed-info">
    <div class="face-info">
      <img src="https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="" />
      <h4 class="name">Adam Mohr</h4>
    </div>
    <div class="tag"><Tag type="success" size="large">合作中</Tag></div>
    <ul class="contact-info">
      <li>
        <i></i>
        <span>028-3945803</span>
      </li>
      <li>
        <i></i>
        <span>l.gonon@imperial.ac.uk</span>
      </li>
      <li>
        <i></i>
        <span>2024-02-19 11:42:46</span>
      </li>
    </ul>
    <ul class="label-list">
      <li>国籍：美国</li>
      <li>编号：JS000001</li>
      <li>支持讲座：线上讲座</li>
      <li>关联学术老师: 刘万均</li>
      <li>美国办负责人：--</li>
    </ul>
  </div>

  <!-- <div class="professor-management-detailed-header">
    <div class="detailed-content">
      <div class="img"></div>
      <div class="meta">
        <h1 class="title">
          <span>宏观物理学专业课程：从广义相对论探索宇宙起源</span>
          <em></em>
          <span>CO003999</span>
        </h1>
        <p class="dec">An introduction to Exoplanets and Cosmology Exoplanets Exoplanets</p>
        <ul class="lable">
          <li>教授：jack</li>
          <li>课程类型：lecture</li>
          <li>所属分类：普通课程</li>
          <li>期数：国内A期</li>
        </ul>
        <div class="tag-list">
          <a-space :size="8">
            <Tag type="success" size="large">正常招生</Tag>
            <Tag>未开课</Tag>
            <Tag type="primary" size="large">不激励</Tag>
          </a-space>
        </div>
      </div>
    </div>
    <div>
      <a-space :size="8">
        <a-button type="primary">编辑</a-button>
        <a-dropdown v-model:open="visible">
          <button type="button" class="ant-dropdown-button" @click.prevent>
            <label>更多操作</label>
            <DownOutlined />
          </button>
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1">创建外化课题</a-menu-item>
              <a-menu-item key="2">添加章节</a-menu-item>
              <a-menu-item key="3">添加内容</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-space>
    </div>
  </div> -->
</template>
<script setup>
  import Tag from "@/components/tag/index.vue"
  import { DownOutlined, UpOutlined } from "@ant-design/icons-vue"
</script>
<style lang="scss" scoped>
  .professor-detailed-info {
    padding: 24px;
    .tag {
      margin: 14px 0 12px;
    }
  }
  .face-info {
    display: inline-block;
    vertical-align: top;
    img {
      width: 60px;
      height: 60px;
      border-radius: 100%;
      margin: auto;
    }
    .name {
      color: var(--n-black-light-1);
      font-size: 16px;
      font-weight: bold;
      line-height: 23px;
      margin-top: 4px;
      text-align: center;
      margin-bottom: 0;
    }
  }
  .contact-info {
    color: var(--n-black-light-1);
    i {
      width: 16px;
      height: 16px;
      background-color: #ccc;
      margin-right: 4px;
    }
    li {
      display: flex;
      align-items: center;
      line-height: 20px;
      font-size: 12px;
      + li {
        margin-top: 12px;
      }
    }
    span {
      line-height: 1;
    }
  }
  .label-list {
    margin-top: 20px;
    color: var(--n-black-light-1);
    li {
      + li {
        margin-top: 12px;
        line-height: 20px;
        font-size: 12px;
      }
    }
  }
</style>
